<template>
  <div class="login">
    <myhead title="登录" :back="true" :login="true"></myhead>
    <van-row class="formbox">
      <van-tabs v-model="active">
        <van-tab title="密码登录" name="pass">
          <van-form ref="form" @submit="loginSubmit">
            <van-cell-group>
              <van-field
                v-model="login.phone"
                name="phone"
                label="手机号码"
                left-icon="phone-o"
                placeholder="请输入"
                :rules="[
                  { required: true, message: '请填写手机号码' },
                  {
                    pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/,
                    message: '请输入正确的手机号码',
                  },
                ]"
              />
              <van-field
                v-model="login.password"
                clearable
                name="password"
                label="登录密码"
                left-icon="bag-o"
                placeholder="请输入"
                :right-icon="type1 == 'password' ? 'eye-o' : 'closed-eye'"
                :type="type1"
                @click-right-icon="changeType1"
                :rules="[
                  { required: true, message: '请填写密码' },
                  {
                    pattern: $reg.pwd,
                    message: '请输入6-16字母和数字',
                  },
                ]"
              />
            </van-cell-group>
            <div style="margin: 16px" class="links">
              <p @click="gotowhere('forgetpass')">忘记密码</p>
              <p class="active" @click="gotowhere('register')">立即注册</p>
            </div>
            <div style="margin: 16px">
              <van-button v-shuibowen block type="info" native-type="submit"
                >密码登录</van-button
              >
            </div>
          </van-form>
        </van-tab>
        <van-tab title="验证码登录" name="code">
          <van-form ref="smsform" @submit="smsLogin">
            <van-cell-group>
              <van-field
                v-model="sms.phone"
                name="phone"
                label="手机号码"
                left-icon="phone-o"
                placeholder="请输入"
                :rules="[
                  { required: true, message: '请填写手机号码' },
                  {
                    pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/,
                    message: '请输入正确的手机号码',
                  },
                ]"
              />
              <van-field
                v-model="sms.captcha"
                clearable
                label="短信验证码"
                placeholder="请输入"
                left-icon="qr"
                maxlength="4"
                :rules="[
                  { required: true, message: '请填写验证码' },
                  {
                    pattern: /^\d{4}$/,
                    message: '请输入正确的验证码',
                  },
                ]"
              >
                <template #button>
                  <van-button
                    v-if="!flag"
                    @click="getCaptcha"
                    size="small"
                    type="primary"
                    >发送验证码</van-button
                  >
                  <van-button
                    v-else
                    class="timebtn"
                    @click="getCaptcha"
                    size="small"
                    disabled
                  >
                    {{ count }} S</van-button
                  >
                </template>
              </van-field>
            </van-cell-group>

            <div style="margin: 16px">
              <van-button v-shuibowen native-type="submit" block type="primary"
                >验证码登录</van-button
              >
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "pass",
      login: {},
      type1: "password",
      sms: {},
      flag: false,
      count: 60,
      timer: null,
    };
  },
  methods: {
    checkPhoneRules() {},
    smsLogin() {
      this.$ajax.captchatverify(this.sms).then((res) => {
        if (res.data.code == 200) {
          this.$router.push({ name: "mine" });
          localStorage.setItem("phone", this.sms.phone);
        }
      });
    },
    getCaptcha() {
      if (this.sms.phone) {
        if (this.$reg.phone.test(this.sms.phone)) {
          // 防抖
          // 发送请求
          this.count--;
          this.flag = true;
          this.timer = setInterval(() => {
            if (this.count > 0) {
              this.count--;
              this.flag = true;
            } else {
              clearInterval(this.timer);
              this.timer = null;
              this.flag = false;
              this.count = 60;
            }
          }, 1000);

          this.$ajax
            .checkPhone({
              phone: this.sms.phone,
            })
            .then((res) => {
              if (res.data.length > 0) {
                this.$ajax
                  .captchatsend({
                    phone: this.sms.phone,
                  })
                  .then((res) => {});
              } else {
                this.$notify({
                  type: "danger",
                  message: "手机号码没有注册,暂不能登录,请注册",
                });
              }
            });
        } else {
          this.$notify({ type: "danger", message: "请先输入有效手机号码" });
        }
      } else {
        this.$notify({ type: "danger", message: "请先输入手机号码" });
      }
      // if(this.$refs.smsform.validate('phone')){

      // }else{

      // }
    },
    changeType1() {
      this.type1 = this.type1 == "password" ? "text" : "password";
    },
    loginSubmit(value) {
      console.log(value);
      this.$ajax.checkPhone(value).then((res) => {
        if (res.data.length > 0) {
          // 登录成功
          this.$router.push({ name: "mine" });
          localStorage.setItem("phone", res.data[0].phone);
          this.changeUserinfo(res.data[0]); // 用户信息存储在 vuex
        } else {
          this.$notify({
            message: "登录失败",
            color: "#ad0000",
            background: "#ffe1e1",
          });
        }
      });
    },
  },
  mounted() {
    if (this.$route.query.phone) {
      this.login = {
        ...this.login,
        phone: this.$route.query.phone, // 获取注册成功的手机号
      };
    } else {
      this.login = {
        ...this.login,
        phone: localStorage.phone, // 获取注册成功的手机号
      };
    }
  },
};
</script>


<style lang="scss" >
.formbox {
  width: 100%;
  // padding:20px;
  .links {
    display: flex;
    justify-content: space-between;
    p {
      font-size: 14px;
      color: #666;
    }
    .active {
      color: #ff5f16;
    }
  }
}

.login {
  .van-tab--active {
    .van-tab__text {
      color: #ff5f16;
    }
  }
  .van-tabs__line {
    background-color: #ff5f16;
  }
}

.timebtn {
  padding: 0 25px;
  font-size: 18px;
  color: #666;
  border: 1px solid #ff5f16;
}
</style>

